.container {
  @apply shadow-sm grid overflow-hidden h-full rounded-b-md;
  grid-template-areas: 
    'header'
    'content';
  grid-template-rows: 32px 1fr;
}

.header {
  grid-area: header;
}

.content {
  @apply overflow-hidden bg-primary flex;
  grid-area: content;
}

.nav {
  @apply basis-16 p-2 pr-0 flex flex-col gap-2;
}

.navItem {
  @apply p-2 flex flex-col items-center justify-center gap-1 text-xs rounded-md bg-primary text-white cursor-pointer;
}
.navItem:not(.activeNavItem):hover {
  @apply bg-hover;
}

.activeNavItem {
  @apply bg-active;
}
